<template>
 <div class="box">
  <div class="container" ref="containerRef"> </div>
  <el-drawer v-if="drawer" v-model="drawer" title="节点属性样式">
   <el-form :model="form" label-width="auto" style="max-width: 600px">

    <el-form-item label="名称">
     <el-input v-model="form.name" :readonly="true" />
    </el-form-item>
    <el-form-item label="文案" v-if="!form.text1">
     <el-input v-model="form.text" />
    </el-form-item>
    <div v-else>
     <el-form-item label="起始节点">
      <el-input v-model="form.text" />
     </el-form-item>
     <el-form-item label="指向节点">
      <el-input v-model="form.text1" />
     </el-form-item>
    </div>

    <el-form-item label="x">
     <el-input v-model="form.x" />
    </el-form-item>
    <el-form-item label="y">
     <el-input v-model="form.y" />
    </el-form-item>
    <el-form-item>
     <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
   </el-form>
  </el-drawer>
 </div>
</template>

<script setup>

import CustomRect, { startNode, resultNode } from "@/components/startNode";
import CustomDiamon, { apiNode } from "@/components/apiNode";
import IconNode from "@/components/iconNode";
import { num1Node, num2Node } from "@/components/num";
import {
 startToNum1, startToNum2, num1ToOperation, num2ToOperation, operationToResult, resultToapi
} from "@/components/edges";
import { operationNode, operationNode1, operationNode2, operationNode3, operationNode4, data as ids } from "@/components/nodes";
import {
 ref,
 onMounted,
 reactive,
 watch,
 onBeforeUnmount
} from 'vue';
import logicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Menu } from "@logicflow/extension";
import { getSum, setSum } from "@/api/index";
import { ElMessage } from 'element-plus'
// 使用ref函数创建响应式引用
const containerRef = ref(null);
const timer = ref(null);
let lf = null;
let drawer = ref(false)
//表单数据
const form = reactive({
 id: '',
 name: '',
 text: '',
 text1: '',
 y: '',
 x: '',
})
const data = reactive({
 num1: 1,
 num2: 2,
 sum: 3,
 compute: ''
})
function isNumber(value) {
 return !isNaN(value);
}
const onSubmit = (res) => {
 console.log(res);
 lf.updateText(form.id, form.text)
 // lf.changeNodeId(form.id, form.name)
 drawer.value = false
}
const setBgColor = (eventObject) => {
 console.log(ids);
 ids.forEach(c => {
  lf.setProperties(c, {
   style: {
    fill: '#ffffff'
   }
  })
 })
 if (eventObject.data.id) {
  lf.setProperties(eventObject.data.id, {
   style: {
    fill: 'rgb(190 224 251)'
   }
  })
 }


}
const jisuan = () => {
 if (!isNumber(data.num1) || !isNumber(data.num2) || !data.compute) return
 switch (data.compute) {
  case "+":
   data.sum = data.num1 + data.num2;
   break;
  case "-":
   data.sum = data.num1 - data.num2;
   break;
  case "*":
   data.sum = data.num1 * data.num2;
   break;
  case "/":
   data.sum = data.num1 / data.num2;
   break;
 }
 lf.updateText('result', data.sum)
 setSum({
  id: "1",
  sum: data.sum
 }).then(ret => {
  console.log(ret);

  if (ret.success) {
   ElMessage({
    message: ret.msg,
    type: 'success',
    plain: true,
   })
  } else {
   ElMessage({
    message: ret.msg,
    type: 'error',
    plain: true,
   })
  }
 }).catch(err => {
  ElMessage({
   message: '保存失败',
   type: 'error',
   plain: true,
  })
 })

}
onMounted(() => {
 // 访问DOM元素
 const container = containerRef.value;

 // 初始化logicFlow实例，并将DOM元素作为容器传递
 lf = new logicFlow({
  container: container,
  grid: true,
  stopScrollGraph: true,
  stopZoomGraph: true,
  plugins: [Menu],
 });

 //注册
 lf.register(CustomRect);
 lf.register(CustomDiamon);
 lf.register(IconNode);
 lf.extension.menu.setMenuConfig({
  nodeMenu: [

  ],
  edgeMenu: [

  ],
  graphMenu: [
   {
    text: '创建节点',
    callback() {
     //创建节点相关代码
     console.log('创建节点');
    },
   },
   {
    text: '编辑节点',
    callback() {
     //编辑节点相关代码
     console.log('编辑节点');

    },
   },
  ],
 })
 lf.render({});
 lf.addNode(startNode);
 lf.addNode(apiNode);
 // lf.addNode(apiNode1);
 lf.addNode(num1Node);
 lf.addNode(num2Node);
 lf.addNode(operationNode);
 lf.addNode(operationNode1);
 lf.addNode(operationNode2);
 lf.addNode(operationNode3);
 lf.addNode(operationNode4);
 lf.addNode(resultNode);

 lf.addEdge(startToNum1);
 lf.addEdge(startToNum2);
 lf.addEdge(num1ToOperation);
 lf.addEdge(num2ToOperation);
 lf.addEdge(operationToResult);
 lf.addEdge(resultToapi);

 timer.value = setInterval(() => {
  const num1 = parseFloat(lf.getNodeDataById('num1').text.value)
  const num2 = parseFloat(lf.getNodeDataById('num2').text.value)

  if (!isNumber(num1) || !isNumber(num2)) {
   ElMessage({
    message: '输入的不是数字',
    type: 'error',
    plain: true,
   })
   // 无法转化为数字   asd123
   lf.updateText('num1', data.num1);
   lf.updateText('num2', data.num2)
   return
  }
  data.num1 = num1
  data.num2 = num2;
  // 可以转化为数字，但是数据不一致 123asd
  lf.updateText('num1', data.num1);
  lf.updateText('num2', data.num2)
 }, 2000)
 //右击节点右侧出现节点属性
 lf.on('node:contextmenu', (eventObject) => {
  console.log('node:contextmenu', eventObject);
  form.name = eventObject.data.id
  form.id = eventObject.data.id
  form.text = eventObject.data.text.value
  form.x = eventObject.data.x
  form.y = eventObject.data.y

  drawer.value = true
 });
 ////右击边右侧出现边属性
 lf.on('edge:contextmenu', (eventObject) => {
  console.log('edge:contextmenu', eventObject);
  form.name = eventObject.data.id
  form.text = eventObject.data.sourceNodeId
  form.text1 = eventObject.data.targetNodeId
  form.x = eventObject.data.endPoint.x
  form.y = eventObject.data.endPoint.y
  drawer.value = true
 });

 lf.on('node:click', (eventObject) => {
  console.log('node:click', eventObject, data);

  switch (eventObject.data.text.value) {
   case "+":
   case "-":
   case "*":
   case "/":
    data.compute = eventObject.data.text.value
    setBgColor(eventObject)
    break;
  }

  switch (eventObject.data.id) {
   case "start":
    jisuan()
    break;
   default:
    break;
  }
 });
})
onBeforeUnmount(() => {
 if (timer.value) {
  clearInterval(timer.value)
 }
})

</script>

<style>
.uml-wrapper {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 background: #FFFFFF;
 border: 2px solid #000000;
 border-radius: 10px;
}

.uml-head {
 font-weight: bold;
 font-size: 16px;
 line-height: 30px;
 text-align: center;
}

.uml-body {
 padding: 5px 10px;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000000;
}

.uml-footer {
 padding: 5px 10px;
 font-size: 14px;
}

body {
 padding: 0;
 margin: 0;
 border: 0;
}

.box {
 position: relative;

}

.container {
 width: 98vw;
 height: 98vh;
}

.lf-menu {
 position: absolute;
 padding: 10px 20px;
 border: 1px solid rgb(6, 6, 6);
 border-radius: 10px;
 list-style: none;
 margin: 0;
 display: none;
}

.lf-menu li:first-child {
 margin-bottom: 10px;
}

.detail {
 position: absolute;
}
/* text{
 font-size: 48px;
} */
</style>